<script >
// This starter template is using Vue 3 <script setup> SFCs
// Check out https://vuejs.org/api/sfc-script-setup.html#script-setup

import { watch } from 'vue'

// import HelloWorld from './components/HelloWorld.vue'
export default {
  data() { //数值
    return {
      message: "张三",
      person: ["张三", "李四", "王五"],
      boxseletc: [], // 多选框
      picked: null,
      city: "BJ"
    }
  },
  methods: {
    changeMessage() {
      this.message = "李四"
    }
  },
  watch: { // 监听器，当对象值发生改变时执行操作
    message: function (newValue, oldValue) {  // 这里不需要写this.message
      console.log("新的值：" + newValue, "，旧的值:" + oldValue);
    },
    boxseletc: function (new1, old1) {
      if (this.boxseletc.length > 2) {
        alert("最多只能选择两项")
        this.boxseletc = old1
      }
    }
  }

}
</script>

<template>
  <div>
    <p>{{message}}</p>
    <button @click="changeMessage">改变message</button>
    <input type="text" v-model="message">
  </div>
  <div>
    <ul>
      <li v-for="item,index in person" :key="index">{{item}}</li>
    </ul>
  </div>

  <!-- 多选框双向绑定 -->
  <div>CheckBox names: {{boxseletc}} </div>
  <input type="checkbox" id="tom" value="tom" v-model="boxseletc">
  <label for="tom">tom</label>
  <input type="checkbox" id="jack" value="jack" v-model="boxseletc">
  <label for="jack">jack</label>
  <input type="checkbox" id="nike" value="nike" v-model="boxseletc">
  <label for="nike">nike</label>

  <!-- 单选框 -->
  <div>picked names: {{picked}} </div>
  <input type="radio" id="man" value="man" v-model="picked">
  <label for="man">男生</label>
  <input type="radio" id="woman" value="woman" v-model="picked">
  <label for="woman">女生</label>

  <!-- 选项框-单选 -->
  <div>选中的城市是：{{city}}</div>
  <select v-model="city">
    <option value="HK">香港</option>
    <option value="BJ">北京</option>
    <option value="SH">上海</option>
  </select>

</template>

<style scoped>

</style>
